<template>
  <div class="usage-guide-container space-y-4">
    <!-- 使用说明 -->
    <n-alert type="info" :bordered="false" v-if="steps && steps.length > 0">
      <template #icon>
        <n-icon>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
          </svg>
        </n-icon>
      </template>
      <div class="usage-guide">
        <h4 class="font-semibold mb-2">{{ title || '使用说明' }}</h4>
        <slot name="content">
          <ul class="list-disc list-inside space-y-1">
            <li v-for="(step, index) in steps" :key="index">{{ step }}</li>
          </ul>
        </slot>
        <div v-if="example" class="mt-3">
          <h5 class="font-medium mb-1">示例：</h5>
          <div class="text-sm text-gray-600">{{ example }}</div>
        </div>
      </div>
    </n-alert>

    <!-- 注意事项 -->
    <n-alert type="warning" :bordered="false" v-if="tips && tips.length > 0">
      <template #icon>
        <n-icon>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
        </n-icon>
      </template>
      <div class="usage-guide">
        <h4 class="font-semibold mb-2">注意事项</h4>
        <ul class="list-disc list-inside space-y-1">
          <li v-for="(tip, index) in tips" :key="index">{{ tip }}</li>
        </ul>
      </div>
    </n-alert>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string;
  steps?: string[];
  tips?: string[];
  example?: string;
}

defineProps<Props>();
</script>

<style scoped>
.usage-guide {
  line-height: 1.6;
}
</style>